<script setup>
import { onBeforeMount, ref } from 'vue'
import dataSubscriptionModel from './components/dataSubscriptionModel.vue'
import MyIcon from '@/components/my-icon/index.vue'
import { feedDataList, feedUpdate } from '@/api'
import { ElMessage } from 'element-plus'
const dialogSelectVisible = ref(false)
const switchVal = ref(true)
const dataModel = ref()
const dataList = ref([
	{
		id: '123',
		key: 'customData',
		title: '客户数据',
		children: [
			{
				title: '客户总数',
				id: 'customData1',
				key: 'customer_total',
				isCheck: true
			},
			{
				title: '新增客户数',
				key: 'customer_new',
				id: 'customData2',
				isCheck: true
			},
			{
				title: '流失客户数',
				id: 'customData3',
				key: 'customer_lossing',
				isCheck: true
			},
			{
				title: '净增客户数',
				id: 'customData4',
				key: 'customer_netnew',
				isCheck: true
			}
		]
	},
	{
		id: '456',
		key: 'customGroupData',
		title: '客户群数据',
		children: [
			{
				title: '客户群总数',
				isCheck: true,
				key: 'group_total',
				id: 'customGroupData1'
			},
			{
				title: '新增客户群',
				isCheck: true,
				key: 'group_new',
				id: 'customGroupData2'
			},
			{
				title: '客户群客户总数',
				isCheck: true,
				key: 'group_customer_new',
				id: 'customGroupData3'
			},
			{
				title: '客户群新增客户数',
				isCheck: true,
				key: 'group_customer_total',
				id: 'customGroupData4'
			},
			{
				title: '客户群流失客户数',
				isCheck: true,
				key: 'group_customer_netnew',
				id: 'customGroupData5'
			},
			{
				title: '客户群净增客户数',
				isCheck: true,
				key: 'group_lossing_total',
				id: 'customGroupData6'
			}
		]
	},
	{
		id: '789',
		key: 'sedTime',
		title: '推送时间',
		children: [
			{
				title: '每天 09:00-10:00 推送昨日数据',
				isCheck: true,
				key: 'day_push',
				id: 'sedTime1'
			},
			{
				title: '每周一 09:00-10:00 推送上周数据',
				isCheck: true,
				id: 'sedTime2',
				key: 'week_push'
			},
			{
				title: '每月1号 日09:00-10:00 推送上月数据',
				isCheck: true,
				id: 'sedTime3',
				key: 'month_push'
			}
		]
	},
	{
		id: '789',
		title: '推送方式',
		key: 'sedOption',
		children: [
			{
				title: '提醒',
				isCheck: true,
				id: 'sedOption1',
				key: 'selfapp_remind'
			}
			// {
			// 	title: '邮件提醒',
			// 	isCheck: true,
			// 	id: 'sedOption2',
			// 	key: 'mail_remind'
			// }
		]
	}
])
const roleList = ref([
	// {
	// 	role: '超级管理员',
	// 	children: []
	// },
	{
		role: '员工',
		children: []
	}
	// {
	// 	role: '部门管理员',
	// 	children: []
	// },
	// {
	// 	role: '普通员工',
	// 	children: []
	// },
	// {
	// 	role: '自定义角色',
	// 	children: []
	// }
])
const changeDialogVisible = (visible) => {
	dialogSelectVisible.value = visible
}
const changeVal = async () => {
	let status = false
	const data = await feedUpdate({ status: switchVal.value ? '0' : '1' })
	if (data.status === 'success') {
		ElMessage({
			message: data.msg,
			type: 'success'
		})
		status = true
	} else {
		ElMessage.error(data.msg)
		status = false
	}
	return status
}
const editSelect = () => {
	dialogSelectVisible.value = true
}
const getDataList = async () => {
	try {
		const data = await feedDataList()
		if (data.status === 'success') {
			if (data.data) {
				roleList.value[0].children = data.data.staff
				switchVal.value = data.data.status === 1 ? true : false
				dataList.value.forEach((item) => {
					item.children.forEach((child) => {
						if (data.data[child.key] === 1) {
							child.isCheck = true
						} else {
							child.isCheck = false
						}
					})
				})
			}
		} else {
			ElMessage.error('获取数据订阅失败')
		}
	} catch (error) {
		console.log(error)
		ElMessage.error('获取数据订阅失败')
	}
}
onBeforeMount(() => {
	getDataList()
})
</script>

<template>
	<div class="main">
		<div class="main-data">
			<div class="header" wrap>
				<p style="padding-top: 5px">订阅报表：</p>
				<div class="header-status">
					<el-switch :before-change="changeVal" v-model="switchVal" style="margin-right: 8px" />
					<span>{{ switchVal ? '已开启' : '已关闭' }}</span>
					<p class="header-title">订阅后，员工可通过提醒/邮件查看客户数据</p>
				</div>
			</div>
			<div v-show="!switchVal" class="data-view-img">
				<p style="padding-left: 22px">预览：</p>
				<img
					src="http://weidogstest.oss-cn-beijing.aliyuncs.com/d742229f2ee4de7dd97074b8e66e7b33.jpg"
					alt=""
				/>
			</div>
			<div v-show="switchVal" class="data-view-list">
				<div @click="editSelect()" class="edit-btn"><MyIcon style="margin-right: 5px" name="EditAlt" />修改</div>
				<div class="data-customer-list">
					<div v-for="item in dataList" :key="item.id" class="flex-row">
						<div class="title">{{ item.title }}：</div>
						<div class="flex-col">
							<div v-for="(child, index) in item.children" :key="index + item.id">
								<div class="check-box" v-if="child.isCheck">
									<div v-if="child.title === '提醒'">
										<span>{{ child.title }}</span>
										<el-tooltip placement="top" effect="light">
											<template #content>
												<div class="tooltip-img">
													<img
														style="width: 150px; height: 360px"
														src="http://weidogstest.oss-cn-beijing.aliyuncs.com/d742229f2ee4de7dd97074b8e66e7b33.jpg"
														alt=""
													/></div
											></template>
											<sapn style="color: #1890ff; cursor: pointer; margin-left: 3px">示例</sapn>
										</el-tooltip>
									</div>
									<div v-else-if="child.title === '邮件提醒'">
										<span>{{ child.title }}</span>
										<span style="color: rgba(0, 0, 0, 0.45); font-size: 14px; margin-left: 3px"
											>（将以邮件形式发送至接收员工在企业微信绑定的邮箱）</span
										>
										<el-tooltip placement="top" effect="light">
											<template #content>
												<div class="tooltip-img">
													<img
														style="width: 300px; height: 200px"
														src="http://www.crmuu.com/data-subscribe_priview__2.ab86151ebcb5.png"
														alt=""
													/></div
											></template>
											<sapn style="color: #1890ff; cursor: pointer; margin-left: 3px">示例</sapn>
										</el-tooltip>
									</div>
									<div v-else>{{ child.title }}</div>
								</div>
							</div>
						</div>
					</div>
					<div class="flex-row">
						<div style="margin-top: 6px" class="title">接收员工：</div>
						<div class="flex-col">
							<div class="accpet-tip">
								<el-icon style="color: #1890ff; margin-right: 3px"><BellFilled /></el-icon>
								员工查看的数据范围
								<!-- （个人数据、管理部门数据、全部数据），由员工在系统内的角色权限控制 -->
							</div>
							<div class="flex-col">
								<div class="select-table">
									<div class="select-table-header flex-row">
										<div>角色</div>
										<div>员工</div>
									</div>
									<div class="select-table-content">
										<div v-for="(item, index) in roleList" :key="index" class="tr">
											<div style="width: 130px">{{ item.role }}</div>
											<div v-if="item.children.length" class="flex-row staff-content">
												<div v-for="(child, index) in item.children" :key="index">
													<div :class="child.ischeck ? ' no-seat  staff-box' : 'seat staff-box'">
														<img :src="child.avatar" alt="" />
														<span>{{ child.name }}</span>
													</div>
												</div>
											</div>
											<div v-else class="flex-row staff-content">
												<span style="color: #000000a6">-</span>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<dataSubscriptionModel
			:dataList="dataList"
			@changeDialogVisible="changeDialogVisible"
			@getDataList="getDataList"
			:dialogSelectVisible="dialogSelectVisible"
			:roleList="roleList"
			:switchVal="switchVal"
			ref="dataModel"
		/>
	</div>
</template>

<style lang="scss" scoped>
.main {
	padding: 16px;
	overflow-y: auto;
	-webkit-box-flex: 1;
	flex: 1;
	.main-data {
		width: 100%;
		padding: 30px 24px;
		background-color: #fff;
		.header {
			display: flex;
			margin-bottom: 12px;
			font-size: 14px;
			color: #000000d9;
			.header-title {
				margin-top: 4px;
				font-size: 13px;
				color: #8c8c8c;
				font-weight: 400;
			}
			.header-status {
				color: #262626;
			}
		}
		.data-view-img {
			display: flex;
			img {
				width: 188px;
				height: 446px;
			}
		}
		.data-view-list {
			position: relative;
			width: 778px;
			border: 1px solid #eee;
			padding: 24px 24px 0;
			.edit-btn {
				position: absolute;
				top: 0;
				right: 0;
				display: flex;
				-webkit-box-align: center;
				align-items: center;
				-webkit-box-pack: center;
				justify-content: center;
				width: 68px;
				height: 26px;
				background-color: #1890ff;
				font-size: 14px;
				color: #fff;
				border-radius: 0 0 0 2px;
				cursor: pointer;
			}
			.data-customer-list {
				.flex-row {
					align-items: flex-start;
					display: -webkit-box;
					display: flex;
					justify-content: flex-start;
					padding: 0;
					.title {
						font-size: 14px;
						font-weight: 400;
						width: 88px;
						white-space: nowrap;
						color: rgba(0, 0, 0, 0.85);
						margin-top: 1px;
						margin-right: 4px;
						text-align: right;
					}
					.flex-col {
						display: flex;
						flex-direction: column;
						-webkit-box-align: start;
						align-items: flex-start;
						justify-content: flex-start;
						padding: 0;
						margin-bottom: 24px;
						.select-table {
							width: 620px;
							border-radius: 2px;
							margin-top: 12px;
							border: 1px solid #ebebeb;
							.select-table-header {
								background: #fcfcfc;
								padding: 12px 24px;
								font-size: 13px;
								color: #000000a6;
								div:first-child {
									width: 130px;
								}
								div:nth-child(2) {
									-webkit-box-flex: 1;
									flex: 1;
								}
							}
							.select-table-content {
								box-sizing: border-box;
								.tr {
									display: -webkit-box;
									display: flex;
									padding: 12px 24px;
									min-height: 72px;
									border-top: 1px solid #ebebeb;
									.staff-content {
										-webkit-box-flex: 1;
										flex: 1;
										flex-wrap: wrap;
										-webkit-box-align: start;
										align-items: flex-start;
										.no-seat {
											border: 1px solid #ff7875;
											background: #fff8f7;
										}
										.seat {
											background: #f8f8f8;
										}
										.staff-box {
											position: relative;
											display: flex;
											align-items: center;
											min-width: 114px;
											height: 48px;
											padding: 10px;
											margin-right: 8px;
											margin-bottom: 8px;
											border-radius: 2px;
											color: rgba(0, 0, 0, 0.85);
											img {
												width: 28px;
												height: 28px;
												margin-right: 8px;
											}
											span {
												font-size: 14px;
												overflow: hidden;
												text-overflow: ellipsis;
												white-space: nowrap;
											}
										}
									}
								}
								.tr:nth-child(even) {
									background-color: #fcfcfc;
								}
							}
						}
						.accpet-tip {
							display: flex;
							align-items: center;
							height: 34px;
							background: #effaff;
							padding: 8px 16px;
							font-size: 13px;
							color: #000000a6;
						}
						.tooltip-img {
							padding: 16px;
						}
						.check-box {
							min-width: 100%;
							margin-bottom: 12px;
							color: rgba(0, 0, 0, 0.85);
						}
					}
				}
			}
		}
	}
}
</style>
